@import "../../sassmixins/mixins";

@function px2em($px, $base-font-size: 64px) {
  @return $px / $base-font-size * 1em;
}

body, html {
  @include square(100%);
  overflow: hidden;
}

body {
  background-image: url("../image/bg.jpg");
  background-size: 100% 100%;
  position: relative;
}

.container {
  font-size: 1rem;
  @include center-block;
  .inner {
    @include size(px2em(640px), px2em(1032px));
    background-image: url("../image/inner.png");
    background-size: 100% 100%;
  }
}

.btn-area {
  position: absolute;
  bottom: px2rem-s(42px);
  width: 10rem;
  height: px2rem-s(73px);

  .click {
    position: absolute;
    bottom: 0;

    &.share {
      @include size(px2rem-s(273px), px2rem-s(76px));
      background-image: url("../image/share.png");
      background-size: 100% 100%;
      left: px2rem-s(47px);
    }

    &.more {
      @include size(px2rem-s(238px), px2rem-s(73px));
      background-image: url("../image/more.png");
      background-size: 100% 100%;
      right: 48px;
    }
  }
}

.share-dialog {
  @include square(100%);
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("../image/tbg.png");
  display: none;

  .bg {
    @include size(10rem, px2rem-s(333px));
    background-image: url("../image/jiantou.png");
    background-size: 100% 100%;
  }
}